import React, { Component } from 'react'
import { Button, Form, Modal, Popconfirm, Switch } from 'antd'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'

import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import Authorized from 'components/common/authorized'
import { widgetType } from 'constants'

import PropTypes from 'prop-types'

import Style from './list.css'

class ListForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getHelpList: PropTypes.func,
    helpData: PropTypes.object,
    router: PropTypes.object,
    helpDataLoading: PropTypes.bool,
    delHelp: PropTypes.func,
    updateHelpStatus: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      selectedRowKeys: [],
      content: '',
      showDetailModal: false
    }
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getHelpList({
      pageSize,
      pageNo
    })
  }

  getFilterCols = () => {
    return [
      {
        label: '协议标题',
        id: 'title',
        widget: widgetType.input,
        placeholder: '请输入',
        span: 8
      },
      // {
      //   label: '帮助分类',
      //   id: 'categoryCode',
      //   widget: widgetType.select,
      //   placeholder: '请选择',
      //   options,
      //   span: 8
      // },
      {
        label: false,
        key: 'custom',
        widget: 'custom',
        render: () => {
          return (
            <>
              <Button type='primary' style={{ marginRight: 16 }} onClick={() => this.search('custom')}>查询</Button>
              <Button onClick={() => this.reset('custom')}>重置</Button>
            </>
          )
        },
        span: 8
      }
    ]
  }

  getTableCols = () => {
    return [
      {
        title: '帮助编号',
        dataIndex: 'code'
      },
      {
        title: '标题',
        dataIndex: 'title'
      },
      // {
      //   title: '分类',
      //   dataIndex: 'categoryName'
      // },
      {
        title: '发布时间',
        dataIndex: 'createTime'
      },
      {
        title: '启用状态',
        dataIndex: 'status',
        render: (status, record) => <Switch defaultChecked={status === 1} checkedChildren='有效' unCheckedChildren='无效' onChange={() => this.handleUpdateSatus(record)} />
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          return <>
            <a className={Style['a-btn']} onClick={() => this.handleView(record.content)} >查看</a>
            <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>编辑</a>
            <Authorized auth='SETTING:SLA:HELP:DE'>
              <Popconfirm title='确认删除' onConfirm={() => this.handleDel(record.id)}>
                <a className={Style['a-btn']}>删除</a>
              </Popconfirm>
            </Authorized>
          </>
        }
      }
    ]
  }

  handleUpdateSatus = record => {
    this.props.updateHelpStatus({
      id: record.id,
      status: record.status === 1 ? 0 : 1
    }).then(() => {
      this.search('custom')
    })
  }

  handleView = content => {
    this.setState({
      content,
      showDetailModal: true
    })
  }

  handleRestore = id => {
    this.props.router.push(`/setup/help/edit/${id}`)
  }

  handleDel = id => {
    this.props.delHelp({
      id
    }).then(() => {
      this.search('custom')
    })
  }

  reset (custom) {
    if (custom === 'custom') {
      const { form } = this.props
      form.resetFields()
    }
    this.setState({
      pageNo: 1,
      pageSize: 20
    })
    this.props.getHelpList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    if (values === 'custom') {
      const { form } = this.props
      form.validateFields((err, items) => {
        if (!err) {
          values = items
        }
      })
    }
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.props.getHelpList(values)
  }

  onPageChange = (pageNo, pageSize) => {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getHelpList(params)
  }

  onShowSizeChange = (current, pageSize) => {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getHelpList(params)
  }

  handleAddHelp = () => {
    this.props.router.push('/setup/help/add')
  }

  render () {
    const { pageNo, pageSize, selectedRowKeys, content, showDetailModal } = this.state
    const { form, helpData, helpDataLoading } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: helpData && helpData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }

    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <Filters
              cols={this.getFilterCols()}
              form={form}
              search={this.search}
              reset={this.reset}
              actions={false}
            >

              {/* <Button type='primary' onClick={this.closeOrderBySelected}>批量关闭</Button> */}
            </Filters>
            <div className={Style['button-wrap']}>
              <div className={Style['title']}>数据列表</div>
              <div className={Style['btns']}>
                <Button type='primary' onClick={this.handleAddHelp}>发布帮助</Button>
                {/* <Button type='primary'>分类管理</Button> */}
                {/* <Button type='primary'>删除订单</Button> */}
              </div>
            </div>
            <CustomTable
              selectedRowKeys={selectedRowKeys}
              multipleSelect={this.onSelectChange}
              multiple
              loading={helpDataLoading}
              columns={this.getTableCols()}
              dataSource={(helpData && helpData.helpDetailList) || []}
              pagination={pagination} />
          </div>
          <Modal
            title='帮助详情'
            visible={showDetailModal}
            onCancel={() => this.setState({ showDetailModal: false })}
            footer={false}
            bodyStyle={{ maxHeight: 520, overflow: 'auto' }}
          >
            <div dangerouslySetInnerHTML={{ __html: content }} />
          </Modal>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  helpData: state.setup.helpData,
  helpDataLoading: state.loading.effects.setup.getHelpList
})
const mapDispatch = dispatch => ({
  getHelpList: dispatch.setup.getHelpList,
  delHelp: dispatch.setup.delHelp,
  updateHelpStatus: dispatch.setup.updateHelpStatus
})

const List = Form.create()(ListForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(List)
)
